<template>
  <div>
    <el-button type="primary" @click="handleGetBaiDuData">点我获取百度数据</el-button>
    <el-button type="primary" @click="handleGetTouTiaoData">点我获取头条数据</el-button>
    <div v-for="(item, index) of baiduData" :key="index" class="news-item">{{ item['title'] }}</div>
    <div v-for="(item, index) of toutiaoData" :key="index" class="news-item">{{ item['title'] }}</div>
  </div>
</template>

<script setup lang="ts">
import useErrorMessage from '@/hooks/useErrorMessage'
import { getHotSearch } from '@/api/demo'
import { getTouTiao } from '@/api/demo'
import type { BaiDuData, TouTiaoData } from '@/api/demo/model'

const baiduData = ref<BaiDuData[]>([])
const toutiaoData = ref<TouTiaoData[]>([])

const handleGetBaiDuData = async () => {
  try {
    console.log('111====>')
    const { result } = await getHotSearch('baidu')
    if (result && result.length) {
      baiduData.value = result
    }
  } catch (error) {
    useErrorMessage(error as Error)
  }
}

const handleGetTouTiaoData = async () => {
  try {
    const data = await getTouTiao()
    toutiaoData.value = data || []
  } catch (error) {
    useErrorMessage(error as Error)
  }
}
</script>

<style lang="scss" scoped>
p {
  color: red;
}
</style>
